<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>Home</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content=""
	/>
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Meta tag Keywords -->
	<!-- css files -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" href="css/fontawesome-all.css">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->
	<!-- web-fonts -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
	<!-- //web-fonts -->
	<style>

		#loginBtn:hover {
			background: #000;
			-webkit-transition: 0.5s all;
			-o-transition: 0.5s all;
			-moz-transition: 0.5s all;
			-ms-transition: 0.5s all;
			transition: 0.5s all;
		}
		#loginBtn{
			color: #fff;
			background: #f7296f;
			border: none;
			padding: 13px 0;
			margin-top: 30px;
			outline: none;
			width: 36%;
			font-size: 16px;
			cursor: pointer;
			letter-spacing: 2px;
			-webkit-transition: 0.5s all;
			-o-transition: 0.5s all;
			-moz-transition: 0.5s all;
			-ms-transition: 0.5s all;
			transition: 0.5s all;
			box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49);
		}
		
		
		select {
				width: 397px;
			    height: 50px;
			    text-align: center;
			    font-size: 16px;
		}
	</style>
</head>

<body>
	<!-- bg effect -->
	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	</div>
	<!-- //bg effect -->
	<!-- title -->
	<h1>软件班学生管理系统</h1>
	<!-- //title -->
	<!-- content -->
	<div class="sub-main-w3" id="app">
		<form>
			<h2>注册界面
				<i class="fas fa-level-down-alt"></i>
			</h2>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-user"></i>
					账号
				</label>
				<input v-model="student.username" placeholder="请输入账号" name="Name" type="text" required="">
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-user"></i>
					姓名
				</label>
				<input v-model="student.name" placeholder="请输入姓名" name="Name" type="text" required="">
			</div>
			
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					密码
				</label>
				<input v-model="student.password" placeholder="请输入密码" name="Password" type="password" required="">
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					年龄
				</label>
				<input v-model="student.age" placeholder="请输入年龄"  type="text" required="">
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					学校
				</label>

				<select  v-model="student.collegeId" >
					<option selected >请选择学校</option>
					<option v-for="c in collegeList" :value="c.id">{{c.collegeName}}</option>
				</select>
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					专业
				</label>
				<select v-model="student.majorId">
					<option v-for="m in majorList" :value="m.id">{{m.majorName}}</option>
				</select>
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					班级
				</label>
				<select v-model="student.classId">
					<option v-for="c in classNameList" :value="c.id">{{c.className}}</option>
				</select>
			</div>
			<input id="loginBtn" @click="register" type="button" value="注册">
		</form>
	</div>
	<!-- //content -->


	<!-- //copyright -->

	<!-- Jquery -->
	<script src="js/jquery-3.3.1.min.js"></script>
	<!-- //Jquery -->

	<!-- effect js -->
	<script src="js/canva_moving_effect.js"></script>
	<!-- //effect js -->
<!--	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		const  app = new Vue({
			el:"#app",
			data:{
				msg:'Hello Vue',
				student:{
					username:"",
					password:""
				},
				collegeList:[],
				majorList:[],
				classNameList:[]
			},
			created: function (){
				//获取院校
				$.get("/getCollegeInfo",res =>{
					this.collegeList = res;
				})
				//获取专业
				$.get("/getMajorInfo",res =>{
					this.majorList = res;

					//默认返回JSON
				})
				//获取班级
				$.get("/getClassInfo",res =>{
					this.classNameList = res;
				})
			},
			methods:{
				//注册的方法
				register(){
					//需要使用前端框架的前端验证 或开发人员自行进行非空验证 忽略...
					$.post("/addStudent",this.student,res =>{
						if (res ==1){
							alert("注册成功!");
							//成功后跳转至登录页面
							window.location.href="index.html";
						} else {
							alert("注册失败!")
						}
					})


				}
			}

		})

	</script>
</body>

</html>